<template>
  <div class="order-page">
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
      <div class="nav-header" @click="goHome">返回首页</div>
      <hr class="sidebar-divider" />
      <ul class="nav-list">
        <li
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{ active: activeTab === index }"
          @click="activeTab = index"
        >
          {{ tab.label }}
        </li>
      </ul>
    </aside>
    <!-- 右侧内容区域 -->
    <main class="content">
      <h2>{{ tabs[activeTab].label }}</h2>
      <!-- 火车票消息 -->
      <div v-if="activeTab === 0">
        <template v-if="trainMessages.length > 0">
          <MessageCard v-for="(msg, index) in trainMessages" :key="index" v-bind="msg" />
        </template>
        <p v-else class="no-orders">暂未有任何消息</p>
      </div>
      <!-- 火车餐消息 -->
      <div v-if="activeTab === 1">
        <template v-if="mealMessages.length > 0">
          <MessageCard v-for="(msg, index) in mealMessages" :key="index" v-bind="msg" />
        </template>
        <p v-else class="no-orders">暂未有任何消息</p>
      </div>
      <!-- 酒店消息 -->
      <div v-if="activeTab === 2">
        <template v-if="hotelMessages.length > 0">
          <MessageCard v-for="(msg, index) in hotelMessages" :key="index" v-bind="msg" />
        </template>
        <p v-else class="no-orders">暂未有任何消息</p>
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import api from '@/utils/api'
import MessageCard from '@/components/MessageCard.vue'
import type { TrainMessageDTO } from '@/types/trainMessage'

const activeTab = ref(0)
const tabs = [{ label: '火车票消息' }, { label: '火车餐消息' }, { label: '酒店消息' }]
const goHome = () => {
  // 替换为你的首页路由跳转逻辑
  window.location.href = '/home'
}
const route = useRoute()
const username = ref((route.query.username as string) || '') // 获取 username 参数
const trainMessages = ref<TrainMessageDTO[]>([])
const mealMessages = ref<TrainMessageDTO[]>([])
const hotelMessages = ref<TrainMessageDTO[]>([])

const fetchTrainMessages = async () => {
  if (!username.value) return
  try {
    const res = await api.get('/api/message/train', {
      params: {
        username: username.value,
        type: 0,
      },
    })
    trainMessages.value = res.data
  } catch (error) {
    console.error('获取火车票消息失败', error)
  }
}

const fetchMealMessages = async () => {
  if (!username.value) return
  try {
    const res = await api.get('/api/message/train', {
      params: {
        username: username.value,
        type: 1,
      },
    })
    mealMessages.value = res.data
  } catch (error) {
    console.error('获取火车餐消息失败', error)
  }
}

const fetchHotelMessages = async () => {
  if (!username.value) return
  try {
    const res = await api.get('/api/message/train', {
      params: {
        username: username.value,
        type: 2,
      },
    })
    hotelMessages.value = res.data
  } catch (error) {
    console.error('获取酒店消息失败', error)
  }
}

// 初次加载获取消息
onMounted(() => {
  if (activeTab.value === 0) {
    fetchTrainMessages()
  } else if (activeTab.value === 1) {
    fetchMealMessages()
  } else if (activeTab.value === 2) {
    fetchHotelMessages()
  }
})

// 监听 tab 切换
watch(activeTab, (newVal) => {
  if (newVal === 0) {
    fetchTrainMessages()
  } else if (newVal === 1) {
    fetchMealMessages()
  } else if (newVal === 2) {
    fetchHotelMessages()
  }
})
</script>

<style scoped>
.order-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  overflow: hidden; /* 防止整体页面滚动 */
}

/* 分割线 */
/* 左侧导航栏 */
.sidebar {
  width: 160px;
  background-color: #0086f6;
  color: white;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  flex-shrink: 0; /* 防止收缩 */
  height: 100vh; /* 固定高度占满视口 */
  position: sticky; /* 或 fixed 也可 */
  top: 0;
  overflow-y: auto; /* 如果导航项很多，也允许自己内部滚动 */
}
/* 顶部标题 */
.sidebar h1 {
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
}
/* 返回首页 */
.nav-header {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  cursor: pointer;
  color: white;
  text-align: center;
  transition: opacity 0.3s;
}
.nav-header:hover {
  opacity: 0.8;
}
/* 分隔线样式 */
.sidebar-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  margin: 12px 0 16px;
}
/* 列表样式 */
.nav-list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 统一分隔间距 */
}
.nav-list li {
  padding: 10px 16px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: white;
  position: relative;
  background-color: transparent;
  border: none; /* 移除旧的分割线 */
}
.nav-list li:last-child {
  border-bottom: none;
}
/* 去除 li+li 的边框和 margin，使用统一 margin */
.nav-list li + li {
  border-top: none;
  margin-top: 0;
  padding-top: 10px;
}
/* 激活态 */
.nav-list li.active {
  background-color: rgba(255, 255, 255, 0.25);
  font-weight: bold;
}
/* 悬浮态（背景不贴上下边缘） */
.nav-list li:hover {
  background-color: rgba(255, 255, 255, 0.15);
  padding-left: 18px; /* 微调，使 hover 背景更有呼吸感 */
}

/* 右侧内容 */
.content {
  flex: 1;
  padding: 40px;
  background-color: #f9fafb;
  overflow-y: auto;
  height: 90vh; /* 与左侧高度一致 */
}
.content h2 {
  margin-bottom: 24px;
  color: #007bff;
  font-size: 22px;
  font-weight: 600;
}
.no-orders {
  text-align: left;
  color: #999;
  margin-top: 2rem;
  font-size: 1.1rem;
}
</style>
